<div [formGroup]="fieldForm">
    <div class="form-group row">
        <label class="col-3 col-form-label" for="{{ field.fieldId }}_fieldName">{{ "common.name" | sqxTranslate }}</label>
        <div class="col-9">
            <input class="form-control" id="{{ field.fieldId }}_fieldName" [ngModel]="field.name" [ngModelOptions]="{ standalone: true }" readonly />
            <sqx-form-hint> {{ "schemas.field.nameHint" | sqxTranslate }} </sqx-form-hint>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-3 col-form-label" for="{{ field.fieldId }}_fieldLabel">{{ "common.label" | sqxTranslate }}</label>
        <div class="col-9">
            <sqx-control-errors for="label" />
            <input class="form-control" id="{{ field.fieldId }}_fieldLabel" formControlName="label" maxlength="100" />
            <sqx-form-hint> {{ "schemas.field.labelHint" | sqxTranslate }} </sqx-form-hint>
        </div>
    </div>

    <div class="form-group row">
        <label class="col-3 col-form-label" for="{{ field.fieldId }}_fieldHints">{{ "common.hints" | sqxTranslate }}</label>
        <div class="col-9">
            <sqx-control-errors for="hints" />
            <input class="form-control" id="{{ field.fieldId }}_fieldHints" formControlName="hints" maxlength="1000" />
            <sqx-form-hint> {{ "schemas.field.hintsHint" | sqxTranslate }} </sqx-form-hint>
        </div>
    </div>

    @if (field.properties.isContentField) {
        <div class="form-group row">
            <label class="col-3 col-form-label">{{ "common.tags" | sqxTranslate }}</label>
            <div class="col-9">
                <sqx-tag-editor id="schemaTags" formControlName="tags" />
                <sqx-form-hint> {{ "schemas.field.tagsHint" | sqxTranslate }} </sqx-form-hint>
            </div>
        </div>
    }
</div>
